<template>
  <div class="example7">
    <code-container
      :code="thisCode"
      v-on:close="isShowCode = false"
      v-if="isShowCode"
    ></code-container>

    <data-v-panel>
      <template #title
        >加载Loading
        <a href="JavaScript:;" class="look-code" @click="lookCode('loading')"
          >代码</a
        >
      </template>
      <template #body>
        <div class="title">类型1</div>
        <div class="content">
          <data-v-loading color="#01B9A3"></data-v-loading>
          <data-v-loading color="#ffffff"></data-v-loading>
          <data-v-loading color="#32B16C"></data-v-loading>
          <data-v-loading color="#FB625B"></data-v-loading>
        </div>
        <div class="title">类型2</div>
        <div class="content">
          <data-v-loading
            color="#01B9A3"
            type="2"
            :percentage="percentage"
          ></data-v-loading>
          <data-v-loading
            color="#18A8C4"
            type="2"
            :percentage="percentage"
          ></data-v-loading>
          <data-v-loading
            color="#32B16C"
            type="2"
            :percentage="percentage"
          ></data-v-loading>
          <data-v-loading
            color="#A01712"
            type="2"
            :percentage="percentage"
          ></data-v-loading>
        </div>
        <div class="title">类型3</div>
        <div class="content">
          <data-v-loading
            color="#01B9A3"
            type="3"
            :percentage="percentage"
          ></data-v-loading>
          <data-v-loading
            color="#18A8C4"
            type="3"
            :percentage="percentage"
          ></data-v-loading>
          <data-v-loading
            color="#32B16C"
            type="3"
            :percentage="percentage"
          ></data-v-loading>
          <data-v-loading
            color="#FB625B"
            type="3"
            :percentage="percentage"
          ></data-v-loading>
        </div>
        <div class="title">类型4</div>
        <div class="content">
          <data-v-loading
            color="#01B9A3"
            type="4"
            :percentage="percentage"
          ></data-v-loading>
          <data-v-loading
            color="#18A8C4"
            type="4"
            :percentage="percentage"
          ></data-v-loading>
          <data-v-loading
            color="#32B16C"
            type="4"
            :percentage="percentage"
          ></data-v-loading>
          <data-v-loading
            color="#FB625B"
            type="4"
            :percentage="percentage"
          ></data-v-loading>
        </div>
        <div class="title">类型5</div>
        <div class="content">
          <data-v-loading
            color="#01B9A3"
            type="5"
            :percentage="percentage"
          ></data-v-loading>
          <data-v-loading
            color="#18A8C4"
            type="5"
            :percentage="percentage"
          ></data-v-loading>
          <data-v-loading
            color="#32B16C"
            type="5"
            :percentage="percentage"
          ></data-v-loading>
          <data-v-loading
            color="#FB625B"
            type="5"
            :percentage="percentage"
          ></data-v-loading>
        </div>
        <div class="title">类型6</div>
        <div class="content">
          <data-v-loading
            color="#01B9A3"
            type="6"
            :percentage="percentage"
          ></data-v-loading>
          <data-v-loading
            color="#18A8C4"
            type="6"
            :percentage="percentage"
          ></data-v-loading>
          <data-v-loading
            color="#32B16C"
            type="6"
            :percentage="percentage"
          ></data-v-loading>
          <data-v-loading
            color="#FB625B"
            type="6"
            :percentage="percentage"
          ></data-v-loading>
        </div>
      </template>
    </data-v-panel>
    <go-home></go-home>
  </div>
</template>

<script>
import CodeContainer from "./code-container.vue";

export default {
  name: "example7",
  components: {
    CodeContainer
  },
  data() {
    return {
      isShowCode: false,
      percentage: 0
    };
  },
  methods: {
    lookCode(name) {
      let filePath = `./docs/${name}.md`;
      // eslint-disable-next-line no-undef
      let loading = ui.loading(2, "加载中...");
      // eslint-disable-next-line no-undef
      get(filePath).then(res => {
        loading.hide();
        this.thisCode = res;
        this.isShowCode = true;
      });
    }
  },

  created() {
    this.timer = setInterval(() => {
      let v = Math.random() * 0.05;
      this.percentage += v;
      if (this.percentage >= 1) {
        this.percentage = 0;
      }
    }, 500);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
};
</script>

<style lang="less">
.example7 {
  min-height: 100vh;
  padding: 10px;
  background: #000 url(./example1-img/gridBg.png);
  color: #fff;
  .grid-item {
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 3px;
  }
  .title {
    margin-top: 30px;
    margin-bottom: 10px;
  }
  .content {
  }
}
</style>
